<template>
    <div class="userInformation">
        <p class="systemName">{{systemName}}</p>
        <div class="round">
          <img src="../assets/image/userImage.png" alt />
        </div>
        <p class="userName" @click="PersonalDetails" title="点击修改信息">{{PersonalInformation.login}}</p>
      </div>
</template>
<script>
    export default {
        props: ["systemName"],
        data() {
            return {
                PersonalInformation: {}
            }
        },
        methods: {
            userName() {
                const userId = sessionStorage.getItem("userId");
                this.$http.get(`/api/threesuns/user/${userId}`).then(res => {
                    this.PersonalInformation = res.data.data;
                });
            },
            PersonalDetails() {
                this.$router.push("/setUser");
            }
        },
        mounted() {
            this.userName()
        },
    }
</script>
<style scoped>
    .userInformation {
        margin-bottom: 40px;
    }

    .systemName {
        font-size: 24px;
        color: #ffffff;
        text-align: center;
    }

    .round {
        text-align: center;
        margin-top: 40px;
    }

    .userInformation p {
        text-align: center;
        color: #ffffff;
        font-size: 24px;
    }

    .userInformation .userName {
        font-size: 20px;
        color: #ffffff;
        margin-top: 20px;
        text-align: center;
    }

    p:hover {
        cursor: pointer;
    }
</style>
